<template>
	<div>
		<div ref="echarts" class="echarts" v-show="list && list.length">
		</div>
		<noData  v-show="!list || !list.length"></noData>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import noData from "./noData.vue"; 
	export default {
		data:()=>{
			return {
				myCharts:'',
				sumarge:0,
			}
		},
		components:{
			noData
		},
		props:{
			companyfontSize:{type:String,default:'22px'},
    	companyColor:{type:String,default:'#4478D5'},
			colors:{
        type:Array,
        default: ()=>{
          return ['#909EFD','#F5DA6D','#FF9E9E','#BFEB81','#6DE6DF']
        }
			},
			list:{
        type:Array
      },
      title:{
        type:String
			},
			total:{
				type:Number,
				default:10
			},
			limit:{
				type:Boolean,
				default:true,
			}
		},
		mounted() {
			this.init();
      this.setOption();
		},
		methods:{
			init() {
				this.myCharts = echarts.init(this.$refs['echarts'])
				window.addEventListener('resize',()=>{
					this.myCharts.resize() 
				})
			},
			setOption(){
				this.myCharts.setOption({
					tooltip : {
            trigger: 'item',
            formatter:function(data) {
              return `${data.name}(${data.value}人)`
            }
					},
					legend: {
						left: 'center',
						top: 'bottom',
            data: this.list,
            formatter: function (name) {
              return name
            }
					},
          color:this.colors,
          title:{
            text:"累计："+this.total+"人",
            left:"center",
            top:"52%",
            textStyle:{
                color:"#737A96",
                fontSize:14,
                align:"center"
            }
          },
          graphic:{
            type:"text",
            left:"center",
            top:"48%",
            style:{
                text:"年龄分布",
                textAlign:"center",
                fill:"#737A96",
                fontSize:14
            }
          },
					calculable : true,
					series : [
						{
							name:this.title,
							type:'pie',
							width:"100%",
							height:"100%",
              top:'0',
              roseType: 'radius',
							radius : ['30%', '75%'],
							center : ['50%', '53%'], 
							labelLine:{
								length:4,
								smooth:true,
							},
							label: {
                show:false,
								"normal": {
									"show": true,
									"color":'#333',
									"position":'outside',
									formatter: function(params){
                    // var str = `${params.data.name}:${params.data.value}(${params.percent}%)`;
                    var str = `${params.percent}%`;
										return str
									},
								}
							},
							data:this.list
						}
					]
				});
			}
		},
		watch:{
			list:{
				deep:true,
				handler(){
					this.$nextTick(() => {
						this.setOption()
						this.myCharts.resize()
					})
				}
			}
		}
	}
</script>

<style  scoped="scoped" lang="scss">
	.echarts{
    width: 100%;
    height: 440px;
	}
</style>
